<template>
  <div id="goodsList">
    <div v-if="table_data01 != 0">
      <div class="sort">
        <p
          class="sales"
          :class="sort_01 == 1 ? 'select_01' : ''"
          @click="sort(1)"
        >销量</p>
        <p
          class="volume"
          :class="sort_01 == 2 ? 'select_01' : ''"
          @click="sort(2)"
        >销售额</p>
        <p
          class="date"
          :class="sort_01 == 3 ? 'select_01' : ''"
          @click="sort(3)"
        >上架时间</p>
      </div>
      <div class="goods" v-for="(item, i) in table_data01" :key="i + 'i'">
        <div class="goodsleft">
          <img
            crossorigin="anonymous"
            @click="details(item.pro_id)"
            :src="item.logo"
            alt
          />
        </div>
        <div class="goodsright">
          <div class="goodsrightIcon">
            <SourceIcon class="SourceIcon" sourceid="小店"></SourceIcon>
            <p class="title" @click="details(item.pro_id)">{{ item.title }}</p>
          </div>
          <div
            class="price"
            v-if="
              item.live_prive == item.max_price ||
                item.max_price == 0 ||
                item.live_prive > item.max_price
            "
          >￥{{ item.live_prive }}</div>
          <div
            class="price"
            v-if="item.live_prive < item.max_price"
          >￥{{ format_num(item.live_prive) }}-{{ format_num(item.max_price) }}</div>
          <div class="goodsrightButtom">
            <div>
              <p
                class="num"
                v-if="item.sales_count > 9999"
              >{{ format_num(item.sales_count) }}</p>
              <p class="num" v-else>{{ item.sales_count }}</p>
              <p class="livesales">直播销量</p>
            </div>
            <div>
              <p
                class="num"
                v-if="item.sales_volume > 9999"
              >{{ format_num(item.sales_volume) }}</p>
              <p class="num" v-else>{{ item.sales_volume }}</p>
              <p class="livesales">直播销售额</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom_Collection" v-else>
      <img src="@/assets/three/wsj.png" alt />
      <!-- <p>目前没有可以查看的数据哟，请稍后再试~</p> -->
    </div>
  </div>
</template>

<script>
import SourceIcon from '@/component/SourceIcon';
export default {
  props: ['update'],
  data() {
    return {
      sort_01: 1,
      table_data01: [],
      table_data011: null,
      table_data012: null
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.get_data_table();
    this.loop02 = setInterval(() => {
      this.table_data011 = null;
      this.table_data012 = null;
      this.get_data_table();
    }, 60000);
  },
  watch: {
    update(newValue) {
      this.table_data01 = [];
      this.get_data_table();
      this.$emit('upda', false);
    }
  },
  methods: {
    //跳转
    details(id) {
      this.$router.push({ path: '/goodsDetailsMain', query: { id } });
    },
    //排序
    sort(i) {
      this.sort_01 = i;
      if (i == 1) {
        this.table_data01 = this.table_data01.sort(function (a, b) {
          return b.sales_count - a.sales_count;
        });
      } else if (i == 2) {
        this.table_data01 = this.table_data01.sort(function (a, b) {
          return b.sales_volume - a.sales_volume;
        });
      } else {
        this.table_data01 = this.table_data01.sort(function (a, b) {
          return b.begin_time - a.begin_time;
        });
      }
    },
    //商品列表接口
    get_data_table() {
      this.$axios({
        method: 'get',
        url: '/api/live/GetLivePro1',
        params: {
          room_id: this.$route.query.id
        }
      })
        .then(response => {
          if (response.data.code == 0) {
            this.table_data01 = response.data.data.data;
            var length = this.table_data01.length;
            this.table_data011 = response.data.data.livesales;
            this.table_data012 = response.data.data.livevolume;
            this.$emit('table_data011', this.table_data011);
            this.$emit('table_data012', this.table_data012);
            this.$emit('length', length);
            this.table_data01 = this.table_data01.sort(function (a, b) {
              return b.sales_count - a.sales_count;
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  components: {
    SourceIcon
  }
};
</script>

<style scoped lang="less">
#goodsList {
  .sort {
    margin-top: 0.666667rem;

    text-align: center;
    font-size: 0.346667rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.72rem;
    letter-spacing: 1px;
    color: #888888;
    height: 0.72rem;
    margin-bottom: 0.4rem;
    p {
      float: right;
      width: 2.053333rem;
      height: 0.72rem;
      border-radius: 0.133333rem;
      border: solid 1px #888888;
      margin-right: 0.4rem;
    }
  }
  .select_01 {
    color: #ffffff;
    background-color: #1779ff;
    border: solid 1px #1779ff !important;
  }
  .goods {
    width: 8.666667rem;
    height: 2.4rem;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 0.133333rem;
    border: solid 1px #888;

    margin: auto;
    padding-top: 0.266667rem;
    padding-left: 0.266667rem;
    padding-right: 0.266667rem;
    display: flex;
    margin-bottom: 0.186667rem;
    .goodsleft {
      width: 2.133333rem;
      height: 2.133333rem;
      background-color: #ff7600;
      border-radius: 0.266667rem;
      img {
        width: 2.133333rem;
        height: 2.133333rem;
        background-color: #ff7600;
        border-radius: 0.266667rem;
      }
    }
    .goodsright {
      margin-left: 0.266667rem;
      .goodsrightIcon {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .SourceIcon {
        display: inline-block;
        padding: 0;
      }
      .title {
        width: 5.5rem;
        padding-right: 0.5rem;
        text-indent: 0.206667rem;
        font-size: 0.4rem;
        color: #ffffff;
        white-space: nowrap; /*超出的空白区域不换行*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*文本超出显示省略号*/
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
      }
      .price {
        display: flex;
        font-size: 0.346667rem;
        font-family: Dinpro-medium;
        line-height: 30px;
        letter-spacing: 0px;
        color: #ff0000;
        p {
          font-size: 0.48rem;
          font-family: Dinpro-medium;
        }
      }
      .goodsrightButtom {
        display: flex;
        height: 0.8rem;
        div {
          width: 2.733333rem;
          .num {
            font-size: 0.373333rem;
            font-family: Dinpro-medium;
            letter-spacing: 0px;
            color: #ffffff;
          }
          .livesales {
            font-size: 0.293333rem;
            letter-spacing: 0px;
            color: #888888;
          }
        }
      }
    }
  }
  // 暂无数据
  .bottom_Collection {
    width: 5.333333rem;
    height: 5.333333rem;
    margin: 1.4rem auto;
    img {
      width: 5.333333rem;
      height: 5.333333rem;
    }
    p {
      text-align: center;
      font-size: 0.373333rem;
      line-height: 0.4rem;

      color: #888888;
    }
  }
}
</style>
